同源策略与跨域资源共享

工作中，经常会遇到需要跨域请求数据的情况。由于浏览器的同源策略,导致无法直接通过ajax拿到后台数据。解决这个问题的方式之一就是JSONP。还有一种方式更高效简单——跨域资源共享(Cross-origin Resource Sharing )，采用这种方式，前端不需要做任何的修改，和平时一样写ajax方法，就能够拿到后台数据。

同源策略（same-origin policy）—— 浏览器安全的基石。

含义：

1995年，同源政策由Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初的含义是指A网页cookie，B网页不能打开，除非这A、B两个页面同源。所谓同源指的是三个相同。协议相同，域名相同，端口相同。
举例来说，现在打开的页面是http://www.baidu.com网址。同源情况如下：

https://www.baidu.com         // 不同源（协议不同）
http://wenku.baidu.com        // 不同源（域名不同）
http://www.baidu.com:8080     // 不同源（端口不同）
http://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0       //同源

目的：

保证用户信息安全，防止网站数据的窃取。

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

限制范围：

随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。

//（1） Cookie、LocalStorage 和 IndexDB 无法读取。

//（2） DOM 无法获得。

//（3） AJAX 请求不能发送。

跨域资源共享（Cross-origin resource sharing）

跨域资源共享（CORS）是一个W3C标准，它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

简介：

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

简单的说，遇到再遇到跨域问题，如果通过CORS来解决的话，前端工作者正常些AJAX就可以了。^_^ （此处应有掌声！！！）

参考

关于跨域资源共享（CORS）和 浏览器的同源策略限制的具体讲解。已经有很多大神写过文章博客。在这里就不再班门弄斧了。有兴趣的同学可以根据以下两个链接深入研究下。

• 跨域资源共享 CORS 详解
• 浏览器同源政策及其规避方法